<template>
  <div class="box">
    <div class="h-box">
      <div class="title">{{ nav.Products }}</div>
      <div class="result">
        <span class="number">{{ proTotal }}</span> {{ language.mess.Results }}
      </div>
    </div>
    <div class="select-list">
      <div
        class="select-menu"
        v-for="(item, index) in attrList"
        :key="index"
        @click="openChild(index)"
      >
        <!-- @click="openMenuSelect(item, index)" -->
        {{ item.name }} <span v-if="item.chosList.length">({{ item.chosList.length }})</span>
        <img
          v-if="!item.menuShow && item.children.length"
          class="s-img"
          src="/image/detail/down.png"
          alt=""
        />
        <img
          v-if="item.menuShow && item.children.length"
          class="s-img"
          src="/image/detail/up.png"
          alt=""
        />
        <div v-if="item.menuShow" class="child-box" @mouseleave="closeMenuSelect(index)">
          <div
            :class="['child-main', item.chosList.includes(items.id) ? 'child-main-chose' : '']"
            v-for="(items, indexs) in item.children"
            :key="indexs"
            @click="openMenuSelect(items, index, indexs)"
          >
            {{ items.name }}
          </div>
        </div>
      </div>
      <div
        class="select-menu" >
          <div @click.stop.prevent="handelOpenFilter('isWeight')">{{ nav.weight }}</div>
          <img
            v-if="!isFilter.isWeight"
            class="s-img"
            @click.stop.prevent="handelOpenFilter('isWeight')"
            src="/image/detail/down.png"
            alt=""
          />
          <img
            v-if="isFilter.isWeight"
            class="s-img"
            @click.stop.prevent="handelOpenFilter('isWeight')"
            src="/image/detail/up.png"
            alt=""
          />
          <div v-if="isFilter.isWeight" class="option-main"  @mouseleave="closeMenuFilter()">
            <div class="input-box">
              {{nav.min}}:<a-input suffix="g/m²" v-model:value="weightList[0]"/>
            </div>
            <div class="input-box-m"> - </div>
            <div class="input-box">
              {{nav.max}}:<a-input suffix="g/m²" v-model:value="weightList[1]" />
            </div>
          </div>
        </div>
        <div
        class="select-menu" >
          <div @click.stop.prevent="handelOpenFilter('isWidth')">{{ nav.width }}</div>
          <img
            v-if="!isFilter.isWidth"
            class="s-img"
            @click.stop.prevent="handelOpenFilter('isWidth')"
            src="/image/detail/down.png"
            alt=""
          />
          <img
            v-if="isFilter.isWidth"
            class="s-img"
            @click.stop.prevent="handelOpenFilter('isWidth')"
            src="/image/detail/up.png"
            alt=""
          />
          <div v-if="isFilter.isWidth" class="option-main"  @mouseleave="closeMenuFilter()">
            <div class="input-box">
              {{nav.min}}:<a-input suffix="cm" v-model:value="widthList[0]" />
            </div>
            <div class="input-box-m"> - </div>
            <div class="input-box">
              {{nav.max}}:<a-input suffix="cm" v-model:value="widthList[1]" />
            </div>
          </div>
        </div>
        <div
        class="select-menu" >
          <div @click.stop.prevent="handelOpenFilter('isPrices')">{{ nav.Prices }}</div>
          <img
            v-if="!isFilter.isPrices"
            class="s-img"
            @click.stop.prevent="handelOpenFilter('isPrices')"
            src="/image/detail/down.png"
            alt=""
          />
          <img
            v-if="isFilter.isPrices"
            class="s-img"
            @click.stop.prevent="handelOpenFilter('isPrices')"
            src="/image/detail/up.png"
            alt=""
          />
          <div v-if="isFilter.isPrices" class="option-main"  @mouseleave="closeMenuFilter()">
            <div class="input-box">
            {{nav.min}}:<a-input :suffix="stroe.currency" v-model:value="priceList[0]" />
            </div>
            <div class="input-box-m"> - </div>
            <div class="input-box">
              {{nav.max}}:<a-input :suffix="stroe.currency" v-model:value="priceList[1]" />
            </div>
          </div>
        </div>
        <div
        class="select-menu" >
          <div @click.stop.prevent="handelOpenFilter('isVolumePrice')">{{ nav.volumePrice }}</div>
          <img
            @click.stop.prevent="handelOpenFilter('isVolumePrice')"
            v-if="!isFilter.isVolumePrice"
            class="s-img"
            src="/image/detail/down.png"
            alt=""
          />
          <img
            @click.stop.prevent="handelOpenFilter('isVolumePrice')"
            v-if="isFilter.isVolumePrice"
            class="s-img"
            src="/image/detail/up.png"
            alt=""
          />
          <div v-if="isFilter.isVolumePrice" class="option-main"  @mouseleave="closeMenuFilter()">
            <div class="input-box">
              {{nav.min}}:<a-input :suffix="stroe.currency" v-model:value="vpriceList[0]" />
            </div>
            <div class="input-box-m"> - </div>
            <div class="input-box">
              {{nav.max}}:<a-input :suffix="stroe.currency" v-model:value="vpriceList[1]" />
            </div>
          </div>
        </div>
    </div>
    <div class="result-box">
      <div class="r-tit">Selected:</div>
      <div class="r-list">
        <div class="r-item" v-for="(item, index) in choseList" :key="index">
          <div class="r-name">{{ item.name }}</div>
          <img class="close-icon" src="/image/common/close.png" alt="" @click="delCate(item)" />
        </div>
        <div class="r-item" v-if="weightList.length">
          <span>{{ nav.weight }} (g/m²) :</span>
          <span>{{ weightList[0] }} ~ {{weightList[1]}}</span>
          <img class="close-icon" src="/image/common/close.png" alt="" @click="delFilter('isWeight')" />
        </div>
        <div class="r-item" v-if="widthList.length">
          <span>{{ nav.width }}: </span>
          <span>{{ widthList[0] }} ~ {{widthList[1]}}</span>
          <img class="close-icon" src="/image/common/close.png" alt="" @click="delFilter('isWidth')" />
        </div>
        <div class="r-item" v-if="priceList.length">
          <span>{{ nav.Prices }} ({{stroe.currency}}): </span>
          <span>{{ priceList[0] }} ~ {{priceList[1]}}</span>
          <img class="close-icon" src="/image/common/close.png" alt="" @click="delFilter('isPrices')" />
        </div>
        <div class="r-item" v-if="vpriceList.length">
          <span>{{ nav.volumePrice }} ({{stroe.currency}}): </span>
          <span>{{ vpriceList[0] }} ~ {{vpriceList[1]}}</span>
          <img class="close-icon" src="/image/common/close.png" alt="" @click="delFilter('isVolumePrice')" />
        </div>
        <div class="reset" @click="resetBtn">{{ nav.Reset }}</div>
        <div class="filter" @click="selectFilter">{{ nav.Search }}</div>
      </div>
    </div>
    <!-- <div class="other-b">
      <div
        class="option-b"
        v-for="(item, index) in attrList"
        :key="index"
        @click="changeOption(item)"
      >
        <img
          v-if="choseOption.includes(item)"
          class="c-img"
          src="/image/common/checkout2.png"
          alt=""
        />
        <img v-else class="c-img" src="/image/common/checkout1.png" alt="" />
        <div class="c-name">{{ item.name }}</div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";
import { commonStore } from "@/components/store";
const stroe = commonStore();


const emit = defineEmits(["filterResult", "changeList", "filterAttr"]);
const { nav } = language;
defineProps<{
  proTotal: number;
}>();
const isFilter = ref({
  isWeight: false,
  isWidth: false,
  isVolumePrice: false,
  isPrices: false,
});
type TSelect = {
  id: number;
  name: string;
  value: string;
  status: boolean;
  num: number;
  parentId: number;
};
type Tattr = {
  name: string;
  id: number;
  parentId: number;
  children: Tattr[];
  chosList: number[];
  menuShow: boolean;
};
const selectList = ref<TSelect[]>([]);
const choseList = ref<TSelect[]>([]);
const attrList = ref<Tattr[]>([]);
let widthList = ref([]);
let weightList = ref([]);
let priceList = ref([]);
let vpriceList = ref([]);
const handelOpenFilter = (type: "isWeight" | "isWidth" | "isVolumePrice" | "isPrices") => {
  isFilter.value = {
    isWeight: false,
    isWidth: false,
    isVolumePrice: false,
    isPrices: false,
  }
  isFilter.value[type] = !isFilter.value[type];
}
const closeMenuFilter = () => {
  isFilter.value = {
    isWeight: false,
    isWidth: false,
    isVolumePrice: false,
    isPrices: false,
  }
}
const resetBtn = () => {
  //重置
  choseList.value = [];
  widthList.value = [];
  weightList.value = [];
  vpriceList.value = [];
  priceList.value = [];
  selectFilter();
};
const delFilter = (type: "isWeight" | "isWidth" | "isVolumePrice" | "isPrices") => {
  switch (type) {
    case "isWeight":
      widthList.value = [];
      break;
    case "isVolumePrice":
      vpriceList.value = [];
      break;
    case "isWidth":
      weightList.value = [];
      break;
    case "isPrices":
      priceList.value = [];
      break;
    default:
      break;
  }
}
const selectFilter = () => {
  //筛选
  let objs = {
    choseList:choseList.value,
    widthList:widthList.value,
    weightList:weightList.value,
    priceList:priceList.value,
    vpriceList:vpriceList.value,
  }
  emit("changeList", objs);
};
const openChild = async (index: number) => {
  //
  attrList.value.forEach((item, indexs) => {
    if (indexs !== index && item.menuShow) {
      item.menuShow = false;
    }
  });
  if (attrList.value[index].children.length) {
    attrList.value[index].menuShow = !attrList.value[index].menuShow;
  }
};
const closeMenuSelect = (index: number) => {
  //关闭筛选
  attrList.value[index].menuShow = false;
};
const openMenuSelect = async (item: Tattr, index: number, indexs: number) => {
  //选择内容
  const e1 = attrList.value[index].chosList.findIndex((i: number) => i === item.id); //判断是否在数组里
  if (e1 !== -1) {
    attrList.value[index].chosList.splice(e1, 1);
  } else {
    attrList.value[index].chosList.push(item.id);
  }

  const existingIndex = choseList.value.findIndex((i: TSelect) => i.id === item.id);
  if (existingIndex !== -1) {
    choseList.value.splice(existingIndex, 1);
  } else {
    choseList.value.push({ ...item, value: "", status: true, num: 0 });
  }
  emit("changeList", choseList.value);
};
// const openMenu = async (item: TSelect, index: number) => {
//   selectList.value[index].status = !selectList.value[index].status;
//   const existingIndex = choseList.value.findIndex((i: TSelect) => i.id === item.id);
//   if (existingIndex !== -1) {
//     choseList.value.splice(existingIndex, 1);
//   } else {
//     choseList.value.push(item);
//   }
//   emit("changeList", choseList.value);
// };
// const changeOption = (item: Tattr) => {
//   if (choseOption.value.includes(item)) {
//     choseOption.value.splice(choseOption.value.indexOf(item), 1);
//   } else {
//     choseOption.value.push(item);
//   }
//   emit("filterAttr", choseOption.value);
// };
const delCate = (item: TSelect) => {
  let list = choseList.value.filter((i: TSelect) => {
    return i.id !== item.id;
  });
  const e1 = attrList.value.findIndex((i: { id: number }) => i.id === item.parentId); //判断是否在数组里
  attrList.value[e1].chosList = attrList.value[e1].chosList.filter((ita: any) => ita !== item.id);
  choseList.value = list;
  emit("changeList", choseList.value);
};
const init = async () => {
  const { data } = await useServerFetch<TSelect[]>("/app-api/product/category/list", {
    method: "get",
    query: {
      parent: 1,
    },
  });
  selectList.value = data.map((item: TSelect) => {
    return {
      ...item,
      status: false,
    };
  });
};
const initAttr = async () => {
  const { data } = await useServerFetch<Tattr[]>("/app-api/product/attribute/list-all-simple", {
    method: "get",
  });
  const arr: Tattr[] = [];
  data.forEach((item: Tattr, index: number) => {
    if (item.parentId === 0) {
      arr.push({
        ...item,
        children: [],
        menuShow: false,
        chosList: [],
      });
    } else {
      arr.forEach((a: Tattr) => {
        if (a.id === item.parentId) {
          a.children.push(item);
        }
      });
    }
  });
  attrList.value = arr;
};
init();
initAttr();
</script>

<style lang="stylus" scoped>
.box{
  padding 31px 25px
  .h-box{
    display flex
    justify-content flex-start
    align-items center
    margin-bottom 37px

    .title{
      font-weight: bold;
      font-size: 22px;
      margin-right 111px
    }
    .result{
      font-size: 11px;
      color: #111111;
      .number{
        font-weight bold
        margin-right 5px
      }
    }
  }
  .select-list{
    display flex
    justify-content flex-start
    align-items center
    flex-wrap wrap
    .select-menu{
      position relative
      display flex
      justify-content flex-start
      align-items center
      box-sizing border-box
      padding 0 10px
      border-radius: 11px;
      line-height 22px
      border: 1px solid #666666;
      cursor pointer
      margin-right 20px
      margin-bottom 20px
      .s-img{
        width 20px
        margin-left 10px
      }
      .option-main{
        width 360px
        padding 10px
        position absolute
        background #fff
        display flex
        box-shadow:0 0 10px rgba(0,0,0,.2)
        border-radius: 14px;
        bottom -85px
        left 0
        .input-box{
          width 150px
        }
        .input-box-m{
          width 50px
          text-align center
          margin-top 25px
        }
      }
      .child-box{
        position absolute;
        top:24px
        left 0;
        width 120px
        max-height 400px;
        overflow-y scroll;
        background #fff;
        box-sizing border-box
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,.08);
        z-index 9
        .child-main{
          font-size 12px;
          padding: 5px;
          margin-bottom 10px
          cursor pointer
        }
        .child-main-chose{
          background rgba(0,0,0,1)
          color:#fff
        }
        .child-main:hover{
          background rgba(0,0,0,.2)
        }
      }
      .child-box::-webkit-scrollbar {
          position absolute;
          right:4px
          width: 4px;
          height: 4px;
      }
      .child-box::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #666666;
      }
      .child-box::-webkit-scrollbar-track {
          border-radius: 0;
          background: #fff;
      }
    }
  }
  .result-box{
    display flex
    justify-content flex-start
    align-items flex-start
    margin-top 25px
    .r-tit{
      font-weight: bold;
      font-size: 14px;
      color: #111111;
      margin-right 40px
    }
    .r-list{
      display flex
      justify-content flex-start
      align-items center
      flex-wrap wrap
      .r-item{
        display flex
        justify-content flex-start
        align-items center
        height 22px
        line-height 22px
        padding 0 14px
        background: #EDEDED;
        border-radius: 11px;
        font-weight: 400;
        font-size: 11px;
        color: #333333;
        margin-right 17px
        margin-bottom 19px
        .close-icon{
          margin-left 14px
          width 14px
          cursor pointer
        }
      }
      .reset{
        font-weight: 400;
        font-size: 14px;
        color: #80866F;
        height 22px
        line-height 22px
        margin-left 28px
        margin-bottom 19px
        cursor pointer
      }
      .filter{
        font-weight: 400;
        font-size: 14px;
        color: #111111;
        height 22px
        line-height 22px
        margin-left 28px
        margin-bottom 19px
        cursor pointer
      }
    }
  }
  .other-b{
    display flex
    justify-content flex-start
    align-items center
    flex-wrap wrap
    .option-b{
      display flex
      justify-content flex-start
      align-items center
      cursor pointer
      margin-right 20px
      margin-bottom 10px
      .c-img{
        width 20px
      }
      .c-name{
        font-weight: 400;
        font-size: 11px;
        color: #666666;
        margin-left 10px
      }
    }
  }
}
</style>
